<template>
<div class="blog">
  <div class="blog-head">
    <h1 class="main-title">一个博客</h1>
    <h2 class="sub-title">小博客</h2>
  </div>
  <div class="blog-list" v-for="item in blogLists">
    <div class="item">
      <div class="title">
        <p class="text">{{item.title}}</p>
      </div>
      <p class="content">
        {{item.brief}}
      </p>
      <div class="bottom">
        <div class="interval time">
          <i class="el-icon-time"></i>
          {{item.time}}
        </div>
        <div class="interval author">
          <i class="el-icon-document"></i>
          {{item.author}}
        </div>
        <div class="interval comments">
          <i class="el-icon-my">&#xe63c;</i>
          {{item.comments}}
        </div>
      </div>
    </div>
  </div>
  <div class="page">
    <el-pagination
      :small = "false"
      layout="prev, pager, next"
      :total="50"
      :current-page="currentPage"
      @current-change="getListByPage">
    </el-pagination>
  </div>
</div>
</template>

<script>
  export default {
    data () {
      return {
        currentPage: parseInt(this.$route.params.id),
        blogLists: [
          {
            title: '崇才，一家有趣的公司',
            brief: '近期将不定时更新，欢迎关注。 相信打开最近都看到了这样一篇新闻，挂着什么 “中国首个00后CEO” 啊，“00 后软件开发第一人” 等旗号的一家 “科技” 公司。没错，他就是洛阳崇才网络科技有限...',
            time: '2017.09.08',
            author: 'ccName',
            comments: '13'
          },
          {
            title: '崇才，一家有趣的公司',
            brief: '近期将不定时更新，欢迎关注。 相信打开最近都看到了这样一篇新闻，挂着什么 “中国首个00后CEO” 啊，“00 后软件开发第一人” 等旗号的一家 “科技” 公司。没错，他就是洛阳崇才网络科技有限...',
            time: '2017.09.08',
            author: 'ccName',
            comments: '13'
          },
          {
            title: '崇才，一家有趣的公司',
            brief: '近期将不定时更新，欢迎关注。 相信打开最近都看到了这样一篇新闻，挂着什么 “中国首个00后CEO” 啊，“00 后软件开发第一人” 等旗号的一家 “科技” 公司。没错，他就是洛阳崇才网络科技有限...',
            time: '2017.09.08',
            author: 'ccName',
            comments: '13'
          },
          {
            title: '崇才，一家有趣的公司',
            brief: '近期将不定时更新，欢迎关注。 相信打开最近都看到了这样一篇新闻，挂着什么 “中国首个00后CEO” 啊，“00 后软件开发第一人” 等旗号的一家 “科技” 公司。没错，他就是洛阳崇才网络科技有限...',
            time: '2017.09.08',
            author: 'ccName',
            comments: '13'
          }
        ]
      }
    },
    methods: {
      getListByPage (page) {
        this.$router.push('/list/' + page)
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import '~common/stylus/variable.styl'
  .blog
    max-width 800px
    margin 0 auto
    padding-top 100px
    .blog-head
      text-align center
      padding-top 20px
      padding-bottom 60px
      .main-title
        font-size $font-size-large-x
        color #6e8aad
      .sub-title
        font-size $font-size-large-s
        font-style oblique
        color gray
        padding-top 20px
    .blog-list
      .item
        padding-bottom 80px
        .title
          padding-bottom 20px
          .text
            padding-bottom 10px
            color $color-subtitle
            font-size $font-size-large-m
            display inline-block
            border-bottom 2px solid $color-gray
            &:hover
              color $color-subtitle-light
        .content
          padding-bottom 20px
          line-height 30px
        .bottom
          display flex
          .interval
            margin-right 10px
    .page
      padding-bottom 100px
</style>
